<script lang="ts" setup>
import { ref, h, reactive, onMounted,onBeforeMount } from "vue";
import { ReVxeGrid } from "@/components/ReVxeTable";
import { VxeGridPropTypes, VxeUI } from "vxe-table";
import { VxeFormProps, VxeButton,VxeCheckbox,VxeImage } from "vxe-pc-ui";
import { ElMessage } from "element-plus";
import { averageuserdealtList } from "@/api/contract/contract";
const reVxeGridRef = ref();
onMounted(() => {
  // getAverageuserdealtList();
  
});
let taxSourcesId = Number(sessionStorage.getItem("taxSourcesId"))
// 税务端-合同管理-自由职业者合同
const userdealtList = ref<any[]>()
const getAverageuserdealtList = ()=>{
  averageuserdealtList().then(res=>{
    userdealtList.value = res?.data?.rows;
  })
}
const columns: VxeGridPropTypes.Columns<any> = [
  {
    title: "自由职业者姓名",
    field: "averageUserName",
    align: "center",
    minWidth: 100,
    showOverflow: true
  },
  {
    title: "证件号码",
    field: "identityNumber",
    align: "center",
    minWidth: 100,    
  },
  {
    title: "身份证照片正面",
    field: "idCardFront",
    align: "center",
    minWidth: 100,
    slots: {
      default: ({ row }) => {
        if (row.idCardFront) {
          return h(VxeImage, {
            src: `${row.idCardFront}`,
            width: "100",
          });
        }
      }
    }
  },
  {
    title: "身份证照片背面",
    field: "idCardBack",
    align: "center",
    minWidth: 100,
    slots: {
      default: ({ row }) => {
        if (row.idCardBack) {
          return h(VxeImage, {
            src: `${row.idCardBack}`,
            width: "100",
          });
        }
      }
    }
  },
  {
    title: "联系方式",
    field: "mobile",
    align: "center",
    minWidth: 100    
  },
  {
    title: "常住地址",
    field: "permanentAddress",
    align: "center",
    minWidth: 100
  },
  {
    title: "商户名称",
    field: "merchantsInfoIdDisplay",
    align: "center",
    minWidth: 100,
  },  
  {
    title: "合同",
    field: "contractJpgUrl",
    align: "center",
    minWidth: 100,
    slots: {
      default: ({ row }) => {
        let list = [h(VxeButton, {
              status: "primary",
              mode: "text",
              size: "mini",
              content: "查看PDF",
              onClick() {
                if(!row.contractJpgUrl){
                  ElMessage.error("查看地址不存在！");
                  return false;
                }
                window.open(row.contractJpgUrl, "_blank");
              }
            })]
            return list;
      }
    }
  },
  {
    title: "创建时间",
    field: "createTime",
    align: "center",
    minWidth: 100
  }  
];
// 筛选相关
const formRef = ref();
interface FormDataVO {
  averageUserName: string;//姓名
  taxSourcesId: number | string; // 税源地 
}
const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    averageUserName: '',
    taxSourcesId: taxSourcesId,    
  },
  items: [
    {
      field: "averageUserName",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "averageUserName" }
    },    
    { align: "left", span: 4, slots: { default: "active" } }
  ]
});
// 重置内容
const handleInitialFormParams = () => {
  formOptions.data = <FormDataVO>{
    taxSourcesId: '',
    averageUserName: ''
  };
};
const handleSearch = () => {
  reVxeGridRef.value.loadData();
};
const handleReset = async () => {
  await handleInitialFormParams();
  reVxeGridRef.value.loadData("reset");
};

const handleView = (record: Recordable) => {
  
};
const functions: Record<string, string> = {
  add: "platform.client.index.add",
  edit: "platform.client.index.edit",
  view: "platform.client.index.view",
  delete: "platform.client.index.delete"
};


</script>
<template>
  <div>
    <el-card :shadow="`never`">
      <vxe-form ref="formRef" v-bind="formOptions">
        <template #averageUserName="{ data }">
          <el-input
            clearable
            placeholder="请输入姓名"
            v-model="data.averageUserName"
          ></el-input>
        </template>        
        <template #active>
          <el-button @click="handleSearch" native-type="submit" type="primary"
            >搜索</el-button
          >
          <el-button @click="handleReset" native-type="reset">重置</el-button>          
        </template>
      </vxe-form>
    </el-card>
    <el-card :shadow="`never`" class="table-card">
      <ReVxeGrid
        ref="reVxeGridRef"
        :request="averageuserdealtList"
        :functions="functions"
        :searchParams="formOptions.data"
        :columns="columns"
        :action="false"
        @handleView="handleView"
      />
    </el-card>
  </div>
</template>
<style>
</style>
